<template>
	<view class="pagination">
		<!-- 总条数 -->
		<span class="total">共 {{ total }} 条</span>
		<!-- 上一页按钮 -->
		<wd-button size="small" :round="false" :disabled="pageNo <= 1" @click="prevPage" custom-class="custom-shadow">
			<wd-icon name="arrow-left" size="10px"></wd-icon>
		</wd-button>

		<!-- 页码 -->
		<wd-button size="small" :round="false" v-for="page in visiblePages" :key="page"
			:type="pageNo === page?'success':'primary'" @click="changePage(page)">
			{{ page }}
		</wd-button>

		<!-- 下一页按钮 -->
		<wd-button size="small" :round="false" :disabled="pageNo >= totalPages" @click="nextPage"
			custom-class="custom-shadow">
			<wd-icon name="arrow-right" size="10px"></wd-icon>
		</wd-button>

		<!-- 跳转输入 -->
		<span>前往</span>
		<input type="number" v-model="jumpPage" class="jump-input" @keyup.enter="goToPage" />
		<span>页</span>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue'

	const props = defineProps({
		total: {
			type: Number,
			required: true
		}, // 总条数
		pageNo: {
			type: Number,
			required: true
		}, // 当前页码
		pageSize: {
			type: Number,
			required: true
		}, // 每页条数
		pageSizeOptions: {
			type: Array,
			default: () => [10, 20, 50, 100]
		} // 可选每页条数
	})

	const emit = defineEmits(['update:pageNo', 'update:pageSize'])

	const totalPages = computed(() => Math.ceil(props.total / props.pageSize)) // 总页数
	const pageSize = ref(props.pageSize)
	const jumpPage = ref(props.pageNo)

	// 计算可见页码（最多显示5个页码按钮）
	const visiblePages = computed(() => {
		const pages = []
		const maxPagesToShow = 5
		let start = Math.max(1, props.pageNo - 2)
		let end = Math.min(totalPages.value, start + maxPagesToShow - 1)

		if (end - start < maxPagesToShow - 1) {
			start = Math.max(1, end - maxPagesToShow + 1)
		}

		for (let i = start; i <= end; i++) {
			pages.push(i)
		}
		return pages
	})

	// 处理分页切换
	const prevPage = () => changePage(props.pageNo - 1)
	const nextPage = () => changePage(props.pageNo + 1)

	const changePage = (page) => {
		if (page >= 1 && page <= totalPages.value) {
			emit('update:pageNo', page)
			jumpPage.value = page
		}
	}

	// 处理跳转页码
	const goToPage = () => {
		const page = parseInt(jumpPage.value)
		if (page >= 1 && page <= totalPages.value) {
			changePage(page)
		} else {
			jumpPage.value = props.pageNo
		}
	}

	// 处理每页条数改变
	const changePageSize = (event) => {
		pageSize.value = parseInt(event.target.value) // 更新 pageSize
		emit('update:pageSize', pageSize.value)
		emit('update:pageNo', 1) // 改变每页条数后回到第一页
	}
</script>

<style scoped lang="scss">
	.pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		font-size: 14px;
	}

	.total {
		margin-right: 10px;
	}

	.page-size {
		padding: 5px;
		border: 1px solid #ddd;
	}

	:deep() {
		.custom-shadow {
			// width: 10px;
			// height: 8px;
			// padding: 10px 10px;
			// /* 适当增加按钮大小 */
			box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
		}
	}

	

	.jump-input {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		text-align: center;
		border: 1px solid #ddd;
		padding: 3px;
	}
</style>